<template>
  <view>
  <!-- 顶部搜索框 -->
  <mySearch @click='toSearch'></mySearch>
  <view class="cate-box">
    <!-- 左侧滚动区域 -->
    <scroll-view class="cateMenu" scroll-y="true" :style="{height:wh + 'px'}">
      <view @click="changeIndex(index)" class="menuItem " :class="{active:active===index}"
        v-for="(item,index) in cateList" :key="index">{{item.cat_name}}</view>
    </scroll-view>
    <!-- 右边二级分类 -->
    <scroll-view class="cateDetail" scroll-y="true" :style="{height:wh + 'px'}" :scroll-top='scrolltop'>
      <view class="leavl2" v-for="(item,index) in cateLeavl2" :key="index">
        <!-- 标题 -->
        <view class="title">/{{item.cat_name}}/</view>
        <!-- 三级分类 -->
        <view class="leavl3box">
          <view class="leavl3" v-for="(subitem,subindex) in item.children" :key="subindex" 
          @click="toGoodList(subitem.cat_name)">
            <image :src="subitem.cat_icon" mode="widthFix"></image>
            <text>{{subitem.cat_name}}</text>
          </view>
        </view>
      </view>


    </scroll-view>
  </view>
  </view>
</template>

<script>
   import mySetTabbar from '../../tools/setTabbar.js'
  import mySearch from '../../components/my-search/my-search.vue'
  export default {
    mixins:[mySetTabbar],
    components:{
      mySearch
    },
    data() {
      return {
        // 定义窗口高度
        wh: 0,
        // 定义默认选中的元素下标
        active: 0,
        // 获取一级分类数据
        cateList: [],
        // 获取二级分类数据
        cateLeavl2: [],
        scrolltop: 0
      };
    },
    methods: {
      // 点击跳转至搜索页面
      toSearch(){
        uni.navigateTo({
          url:'/pages/search/search'
        })
      },
      // 点击跳转
      toGoodList(key){
        uni.navigateTo({
          url:`/pages/good_list/good_list?=query${key}`
        })
      },
      // 点击切换
      changeIndex(index) {
        this.active = index
        // 二级标题的切换
        this.cateLeavl2 = this.cateList[index].children
        this.scrolltop = this.scrolltop ? 0 : 1
      },
      // 获取分类数据
      async getCateList() {
        const {
          data: res
        } = await uni.$http.get('/api/public/v1/categories')
        // console.log(res);
        if (res.meta.status !== 200) return uni.$showMsg()
        this.cateList = res.message
        // 二级分类数据
        this.cateLeavl2 = this.cateList[0].children
      }
    },
    onLoad() {
      this.getCateList()
      // 得到屏幕中可使用的可视高度
      uni.getSystemInfo({
        success: (res) => {
          // console.log(res);
          this.wh = res.windowHeight - 56
        }
      })
    }
  }
</script>

<style lang="scss">
  .cate-box {
    display: flex;

    .cateMenu {
      width: 120px;
      background-color: #f7f7f7;

      .menuItem {
        width: 100%;
        height: 60px;
        text-align: center;
        line-height: 60px;
        font-size: 14px;
      }

      .active {
        position: relative;
        background-color: #fff;

        &::before {
          content: "";
          display: block;
          width: 3px;
          height: 40px;
          background-color: #c00000;
          position: absolute;
          top: 50%;
          left: 0;
          transform: translateY(-50%);
        }
      }
    }

    .cateDetail {
      .title {
        font-size: 14px;
        font-weight: 700;
        text-align: center;
        margin-top: 20px;
      }

      .leavl3box {
        display: flex;
        flex-wrap: wrap;

        .leavl3 {
          width: 33.33%;
          display: flex;
          flex-direction: column;
          align-items: center;

          image {
            margin-top: 20px;
            width: 60%;
          }

          text {
            font-size: 12px;
          }
        }
      }
    }
  }
</style>
